<template>
	<view class="enlarge">
		<movable-area :style="{width: winW, height: winH}">
			<movable-view :scale="true" :out-of-bounds="true" direction="all" scale-min="0.9"
				class="enlarge-popup" :x="X" :y="Y" @click="closePopupImg"
				@change="onChange">
				<image :src="src" mode="aspectFit"></image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	
	export default {
		name: "enlargePopup",
		data() {
			return {
				winW: '',
				winH: '',
				X: 0,
				Y: 0
			}
		},
		props: {
			src: String,
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.winW = res.screenWidth + 'px'
					this.winH = res.screenHeight + 'px'
				}
			})
		},
		methods: {
			onChange(e) {
				this.X = e.detail.x
				this.Y = e.detail.y
			},
			closePopupImg() {
				this.$emit('closePopupImg')
			}
		}
	}
</script>

<style lang="scss">
	.enlarge {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		background-color: $mask-b;
		.enlarge-popup {
			width: 100vw;
			height: 100vh;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
